<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图书管理</title>
    <base th:href="@{/}" href="/bookstore/"/>
    <link rel="stylesheet" href="static/css/minireset.css" />
    <link rel="stylesheet" href="static/css/common.css" />
    <link rel="stylesheet" href="static/css/cart.css" />
    <link rel="stylesheet" href="static/css/bookManger.css" />

    <!-- 引入vue -->
    <script src="static/script/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入axios -->
    <script src="static/script/axios.js" type="text/javascript" charset="utf-8"></script>
    <!--    引入jquery-->
    <script src="static/script/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>

  </head>
  <body>
  <!--  jquery 异步翻页  -->
  <script>
    function load(currentPage) {
      //发送ajax请求
      $.get("http://localhost:8080/bookstore/bookManager", {
        pageNo: currentPage,
        method: 'pageQuery'
      }, function (pb) {
        //解析Pagebean数据，展示到页面上
        //分页工具条数据展示
        $("#totalPage").html(pb.pageTotal);
        //$("#currentPage").html(pb.pageNo);
        $("#bookCount").html(pb.itemsCount);
        $("#pageNoInput").attr("value",pb.pageNo);

        var spans = "";
        //计算上一页的页码
        var beforeNum = pb.pageNo - 1;
        if (beforeNum <= 0) {
          beforeNum = 1;
        }
        //首页
        var first='<span><a href="javascript:load(1); void(0);" onclick="load(1)">首页</a></span>'
        spans += first;
        //上一页
        var pre = '<span οnclick="javascript:load('+beforeNum+')"><a href="javascript:load('+beforeNum+'); void(0);">上一页</a></span>';
        spans += pre;
        //1.2展示分页页码
        /*
        一共展示10个页码，能够达到前5后4的效果
        如果前面不够5个，后面补齐总数到10个
        如果后面不足4个，前边补齐总数到10个
        */
        //定义开始位置 begin，结束位置 end
        var begin;
        var end;
        //要显示10个页码
        if (pb.pageTotal < 10) {
          //如果总页码都没有10页，就显示全部
          begin = 1;
          end = pb.pageTotal;
        } else {
          //总页码超过10页
          begin = pb.pageNo - 5;
          end = pb.pageNo + 4;
          //如果前边不够5个，后边补齐10个
          if (begin < 1) {
            begin = 1;
            end = begin + 9;
          }
          //如果后边不足4个，前面补齐10个
          if (end > pb.pageTotal) {
            end = pb.pageTotal;
            begin = end - 9;
          }
        }
        for (var i = begin; i <= end; i++) {
          var span;
          //判断当前页码是否等于i
          //创建不同格式的页码li
          if (pb.pageNo == i) {
            span = ' <a href="javascript:load('+i+'); void(0);" class="active" οnclick="load('+i+')" id="page'+i+'">' + i + '</a>';
          } else {
            span = ' <a href="javascript:load('+i+'); void(0);" οnclick="load('+i+')" id="page'+i+'">' + i + '</a>';
          }
          spans += span;
        }
        var nextPage = pb.pageNo + 1;
        if (nextPage > pb.pageTotal) {
          nextPage = pb.pageTotal;
        }
        var next = ' <span οnclick="javascript:load('+nextPage+')" ><a href="javascript:load('+nextPage+'); void(0);">下一页</a></span>';
        var last = ' <span οnclick="javascript:load('+pb.pageTotal+')"><a href="javascript:load('+pb.pageTotal+'); void(0);">  末页</a></span>';
        spans += next;
        spans += last;
        $("#pageNum").html(spans);
        //列表数据展示
        var book_ps = "";
        for (var i = 0; i < pb.pageItems.length; i++) {
          var book = pb.pageItems[i];
          var p ='<tr>' +
                  '<td>' + book.typeName + '</td>\n' +
                  '<td><img src=' + book.imgPath + ' alt="" /></td>\n' +
                  '<td>' + book.bookName + '</td>\n' +
                  '<td>' + book.price + '</td>\n' +
                  '<td>' + book.author + '</td>\n' +
                  '<td>' + book.sales + '</td>\n' +
                  '<td>' + book.stock + '</td>\n' +
                  '<td><a href="/bookstore/bookManager?method=toEditPage&id='+ book.bookId + '\">修改</a></td>\n' +
                  '<td><a class="del" href="/bookstore/bookManager?method=removeBook&id='+ book.bookId + '\" >删除</a></td>\n' +
                  '</tr>'
          book_ps += p;
        }
        $(".list-content").html(book_ps);

      });

    };
    //首次刷新页面
    load(1);
  </script>
    <div class="header">
      <div class="w">
        <div class="header-left">
          <a href="index.html">
            <img src="static/img/logo.gif" alt=""
          /></a>
          <h1>图书管理系统</h1>
        </div>
        <div class="header-right">
          <a href="#" class="order">图书管理</a>
          <a href="protected/orderClient?method=toManagerOrderPage" class="destory">订单管理</a>
          <a href="index.html" class="gohome">返回商城</a>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="w">
        <div class="add">
          <a href="bookManager?method=toAddPage">添加图书</a>
        </div>

        <table>
          <thead>
            <tr>
              <th>类别</th>
              <th>图片</th>
              <th>商品名称</th>
              <th>价格</th>
              <th>作者</th>
              <th>销量</th>
              <th>库存</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody class="list-content">
          </tbody>
        </table>

        <div class="list-footer">
          <div id="pageNum">
          </div>
          共<strong id="totalPage"></strong>页&nbsp;
          <strong id="bookCount"></strong>条记录
          <span>到第</span><input  id="pageNoInput" value="" /><span>页</span>
          <button onclick="toPage()">确定</button>
        </div>

      </div>
    </div>
    <div class="bottom">
      <div class="w">
        <div class="top">
          <ul>
            <li>
              <a href="">
                <img src="static/img/bottom1.png" alt="" />
                <span>大咖级讲师亲自授课</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="static/img/bottom.png" alt="" />
                <span>课程为学员成长持续赋能</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="static/img/bottom2.png" alt="" />
                <span>学员真是情况大公开</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="content">
          <dl>
            <dt>关于我们</dt>
            <dd>教育理念</dd>
            <!-- <dd>名师团队</dd>
            <dd>学员心声</dd> -->
          </dl>
          <dl>
            <dt>资源下载</dt>
            <dd>视频下载</dd>
            <!-- <dd>资料下载</dd>
            <dd>工具下载</dd> -->
          </dl>
          <dl>
            <dt>加入我们</dt>
            <dd>招聘岗位</dd>
            <!-- <dd>岗位介绍</dd>
            <dd>招贤纳师</dd> -->
          </dl>
          <dl>
            <dt>联系我们</dt>
            <dd>https://www.drimwai.com</dd>
            <dd></dd>
          </dl>
        </div>
      </div>
      <div class="down">
        Drimwai's Bookstore.Copyright ©2021
      </div>
    </div>

  <script>
    function toPage() {
      var pageNo = $("#pageNoInput").val();
      load(pageNo);
    }
  </script>
  </body>
</html>
